<template>
    <div>
        <!-- 读取props参数 -->
        name: {{name}}
        <br />
        type: {{type}}
        <br />
        list: {{list}}
        <br />
        isVisible {{isVisible}}
        <br />
        <button @click="handleClick">change type</button>
    </div>
</template>

<script>
    export default {
        name: 'Props',
        // 设置原生属性不会挂载在组件的根元素上
        // inheritAttrs: false,
        props: {
            // 字符串
            name: String,
            type: { 
                validator: function(value) {
                    return ['success','danger','warning'].includes(value);
                }
            },
            // 数组
            list: {
                type: Array,
                default: ()=>[]
            },
            // Boolean类型
            isVisible: {
                type: Boolean,
                default: true
            },
            // 函数类型
            onChange: {
                type: Function,
                default: ()=>{}
            }

        },
        methods: {
            handleClick() {
                //  报错 子组件不能修改父组件传递过来的值
                //  this.type = 'warning' 
                // 如果要修改 那么就要使用其他的方式
                this.onChange(this.type==='success'?'warning':'success');
            }
        }
    }
</script>
